<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片水印工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #watermark-input {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            width: 100%;
        }
        #watermark-text {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
            width: 30%;
        }
        #watermark-input button {
            padding: 8px 16px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        #confirm-btn, #print-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        #confirm-btn:hover, #print-btn:not(:disabled):hover {
            background: linear-gradient(135deg, #5a6fc9 0%, #6a4091 100%);
        }
        #cancel-btn {
            background-color: #808080;
            color: white;
        }
        #cancel-btn:hover {
            background-color: #696969;
        }
        #print-btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
            opacity: 0.7;
        }
        .upload-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .upload-section {
            flex: 1;
            margin: 0 2.5px;
        }
        .preview {
            margin-top: 10px;
            cursor: pointer;
            max-width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #000;
            border-radius: 10px;
            background-color: #f5f5f5;
            min-height: 200px;
            padding: 20px;
        }
        .preview img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }
        .upload-section input[type="file"] {
            display: none;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            text-align: center;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        @media print {
            #watermark-input, .modal, input[type="file"] {
                display: none !important;
            }
            body {
                background-color: white;
                overflow: visible;
                margin: 0;
                padding: 0;
            }
            .upload-container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            .preview {
                border: none;
                margin: 0;
                padding: 0;
                page-break-inside: avoid;
                width: 100%;
                height: auto;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: transparent;
            }
            .preview img {
                max-width: 100%;
                max-height: 100%;
                height: auto;
                width: auto;
                object-fit: contain;
            }
            @page {
                size: A4;
                margin: 2cm;
            }
        }
    </style>
</head>
<body>
    <div id="watermark-input">
        <input type="text" id="watermark-text" placeholder="输入水印内容"  title="水印内容">
        <input type="color" id="watermark-color" value="#ff0000" title="水印颜色">
        <input type="range" id="watermark-opacity" min="0" max="100" value="50" title="透明度">
        <span id="opacity-value">50%</span>
        <button id="confirm-btn" onclick="addWatermark()">生成</button>
        <button id="cancel-btn" onclick="cancelWatermark()">取消</button>
        <button id="print-btn" onclick="printDocuments()" disabled>打印</button>
    </div>
    <div class="upload-container">
        <div class="upload-section">
            <input type="file" id="diploma" accept="image/*" onchange="previewImage(this, 'diploma-preview')">
            <div class="preview" id="diploma-preview" onclick="document.getElementById('diploma').click()">点击此处选择图片照片</div>
        </div>
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>请先选择图片！</p>
        </div>
    </div>
    <script>
        function previewImage(input, previewId) {
            const preview = document.getElementById(previewId);
            preview.innerHTML = '';
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.onload = function() {
                        img.setAttribute('data-original-width', this.naturalWidth);
                        img.setAttribute('data-original-height', this.naturalHeight);
                    };
                    img.setAttribute('data-original-src', e.target.result);
                    img.setAttribute('data-has-watermark', 'false');
                    preview.appendChild(img);
                    updatePrintButtonState();
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function updateOpacityValue() {
            const opacityInput = document.getElementById('watermark-opacity');
            const opacityValue = document.getElementById('opacity-value');
            opacityValue.textContent = opacityInput.value + '%';
        }

        document.getElementById('watermark-opacity').addEventListener('input', updateOpacityValue);

        function addWatermark() {
            const diplomaImg = document.querySelector('#diploma-preview img');
            if (!diplomaImg) {
                const modal = document.getElementById('myModal');
                modal.style.display = 'block';
                const span = document.getElementsByClassName("close")[0];
                span.onclick = function () {
                    modal.style.display = 'none';
                };
                window.onclick = function (event) {
                    if (event.target === modal) {
                        modal.style.display = 'none';
                    }
                };
                return;
            }
            
            const previews = document.querySelectorAll('.preview img');
            previews.forEach(img => {
                const originalSrc = img.getAttribute('data-original-src');
                if (originalSrc) {
                    img.src = originalSrc;
                }
            });
            
            const watermarkText = document.getElementById('watermark-text').value;
            const watermarkColor = document.getElementById('watermark-color').value;
            const watermarkOpacity = document.getElementById('watermark-opacity').value / 100;

            previews.forEach(img => {
                const originalWidth = parseInt(img.getAttribute('data-original-width')) || img.naturalWidth;
                const originalHeight = parseInt(img.getAttribute('data-original-height')) || img.naturalHeight;
                
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                canvas.width = originalWidth;
                canvas.height = originalHeight;
                
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                
                let fontSize = Math.min(canvas.width, canvas.height) / 10;
                ctx.font = `${fontSize}px Arial`;
                let textWidth = ctx.measureText(watermarkText).width;
                
                while (textWidth > canvas.width * 0.8 || textWidth > canvas.height * 0.8) {
                    fontSize -= 1;
                    ctx.font = `${fontSize}px Arial`;
                    textWidth = ctx.measureText(watermarkText).width;
                }
                
                ctx.fillStyle = `rgba(${parseInt(watermarkColor.slice(1, 3), 16)}, ${parseInt(watermarkColor.slice(3, 5), 16)}, ${parseInt(watermarkColor.slice(5, 7), 16)}, ${watermarkOpacity})`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                
                ctx.save();
                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.rotate(Math.PI / 4);
                ctx.fillText(watermarkText, 0, 0);
                ctx.restore();
                
                img.src = canvas.toDataURL();
                img.style.width = 'auto';
                img.style.height = 'auto';
                img.setAttribute('data-has-watermark', 'true');
            });
            
            updatePrintButtonState();
        }

        function cancelWatermark() {
            const previews = document.querySelectorAll('.preview img');
            previews.forEach(img => {
                const originalSrc = img.getAttribute('data-original-src');
                if (originalSrc) {
                    img.src = originalSrc;
                    img.setAttribute('data-has-watermark', 'false');
                }
            });
            updatePrintButtonState();
        }

        function updatePrintButtonState() {
            const printBtn = document.getElementById('print-btn');
            const diplomaImg = document.querySelector('#diploma-preview img');
            
            const hasWatermark = diplomaImg && 
                                diplomaImg.getAttribute('data-has-watermark') === 'true';
            
            printBtn.disabled = !hasWatermark;
        }

        function printDocuments() {
            const diplomaImg = document.querySelector('#diploma-preview img');
            
            if (!diplomaImg) {
                const modal = document.getElementById('myModal');
                modal.style.display = 'block';
                const span = document.getElementsByClassName("close")[0];
                span.onclick = function () {
                    modal.style.display = 'none';
                };
                window.onclick = function (event) {
                    if (event.target === modal) {
                        modal.style.display = 'none';
                    }
                };
                return;
            }
            
            window.print();
        }
    </script>
</body>
</html>